PVI Online course logo

Web Page Design Module 1: Creating Web Pages with HTML Tags


Numbered or Bulleted Lists
To create a list with numbers (an ordered list) or a list with bullets (unordered list) you use either the <ol> or <ul> container tags, respectively.  Inside the container tags, use the <li> tag to denote the start of a list item.  Be sure to end your lists with the closing </ol> or closing </ul> tag.

For example, the HTML code
This is an ordered list:
<ol>
<li>First item
<li>Second item
<li>Third item
</ol>

This is an unordered list:
<ul>
<li>First item
<li>Second item
<li>Third item
</ul>
will be displayed in a browser window as:

This is an ordered list:

  1. First item
  2. Second item
  3. Third item

This is an unordered list:

  • First item
  • Second item
  • Third item

Now it is your turn to add an ordered and unordered list to your first webpage. Open Notepad, then select File, Open and browser to the location of my first webpage (this should be in your HTML file folder on your Google Drive). Place your cursor to the right of the <hr>tag and select the Enter. Type in the following tags entering your own list items in place of Subject 1, Subject 2, Subject 3, Activity 1, Activity 2, and Activity 3..

I am a student at Paul VI Catholic High School. My favorite subjects are:
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>subject 3</li>
</ul>
Three activities I enjoy participating in outside of the classroom include:
<ol>
<li>Activity 1</li>
<li>Activity 2</li>
<li>Activity 3</li>
</ol>

When you are finished entering your tags replace your original html file by selecting File and then selecting Save. Now close your Notepad file, navigate to your HTML file folder on your Google Drive. Select first webpage to preview what your file will look like in a web browser. Your file should look like this.

First webpage lists

If your changes don't appear in the browser window, select the Refresh button. If your changes still don't appear, return to Notepad, select the file and make the necessary corrections. If you need assistance completing this exercise preview the Screen Captured Video. You can also find a link to this video on your Student Resources page. Send your mentor an email with the Subject Line "Request for Help" if you need help finding the errors. If you do not need assistance, proceed with the next page, External Links.


Back to Module 1 Anatomy of Tags and Files Next Module 1 External Links